<template>
  <div>
    <div class="fence-operator">
      <slot></slot>
    </div>
    <div style="margin-top: 10px;">
      <slot name="no-fence"></slot>
      <component v-show="id" ref="viewFenceMap" :is="currentViewComponent" />
    </div>
  </div>
</template>

<script>
import { wgs84togcj02, gcj02towgs84, out_of_china } from 'gps-convert'
import GViewMap from '@/components/map/fence/google/ViewFenceMap'
import TViewMap from '@/components/map/fence/tencent/ViewFenceMap'
import { getAction } from '@/api/manage'
const getOne = "/rental/fence/queryById";

function convertCoordinates(format) {
  if(format){
    var parts = format.slice(1, -1).split(",");
    var latitude = parseFloat(parts[0]);
    var longitude = parseFloat(parts[1]);
    return {
        latitude: latitude,
        longitude: longitude
    };
  }
  return null;
}

function convertCirCle(format) {
    var parts = format.slice(1, -1).split(",");
    var latitude = parseFloat(parts[0]);
    var longitude = parseFloat(parts[1]);
    var radius = parseFloat(parts[2]);
    return {
        latitude: latitude,
        longitude: longitude,
        radius: radius
    };
}

function convertPolygon(format) {
  var points = format.slice(1, -1).split(");(");
  return points.map((item) => {
      let parts = item.split(",");
      let latitude = parseFloat(parts[0]);
      let longitude = parseFloat(parts[1]);
      return {
          latitude: latitude,
          longitude: longitude
      };
  });
}
export default {
  name: 'ViewFenceMap',
  components: {
    GViewMap,
    TViewMap
  },
  props:{
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      language: navigator.language || navigator.userLanguage, // 获取浏览器语言
      currentView: 'GViewMap' // 默认组件，可以根据实际情况修改
    }
  },
  computed: {
    // 根据当前语言选择组件
    currentViewComponent() {
      // 这里只是一个简单的示例，你可能需要根据实际情况调整语言判断逻辑
      if (this.language.startsWith('zh')) {
        // 如果是中文，则使用 TView
        this.currentView = 'TViewMap';
      } else {
        // 其他情况使用 GView
        this.currentView = 'GViewMap';
      }
      return this.currentView;
    }
  },
  watch: {
    // 监听当前语言变化，切换组件
    id:{
      handler(newVal) {
        if(newVal){
          console.log("watch-------------:", newVal);
          this.show(newVal);
        }
      },
      immediate: true,
    }
  },
  methods: {
    async show(fenceId){
      //请求后台获取围栏信息
      const res = await getAction(getOne, {id: fenceId});
      if(res.success){
        const { shapeType, center, area } = res.result;
        console.log("show-------------:", shapeType, center, area);
        let point = convertCoordinates(center);
        //处理地图中心点
        if(out_of_china([point.longitude, point.latitude])){ //国内wgs84坐标转换为gcj02坐标
          const point = wgs84togcj02([center.longitude, center.latitude]);
          x = point[1].toFixed(6);
          y = point[0].toFixed(6);
          point = {"latitude": x, "longitude": y};
        }
        //处理围栏区域
        let fenceArea;
        if (shapeType === 'circle') {
          const { latitude, longitude, radius } = convertCirCle(area);
          let x = latitude;
          let y = longitude;
          if(out_of_china([point.longitude, point.latitude])){ //国内wgs84坐标转换为gcj02坐标
            const point = wgs84togcj02([longitude, latitude]);
            x = point[1].toFixed(6);
            y = point[0].toFixed(6);
          }
          fenceArea = {
            latitude: x,
            longitude: y,
            radius: radius
          };
        }
        if (shapeType === 'polygon') {
          let paths = convertPolygon(area);
          if(out_of_china([paths[0].longitude, paths[0].latitude])){ //国内wgs84坐标转换为gcj02坐标
            paths = paths.map((item) => {
              const { latitude, longitude } = item;
              const point = wgs84togcj02([longitude, latitude]);
              x = point[1].toFixed(6);
              y = point[0].toFixed(6);
              return {
                latitude: x,
                longitude: y
              }
            });
          }
          fenceArea = paths;
        }
        this.$refs.viewFenceMap.show(shapeType, point, fenceArea, 'view-fence-map__container');
      }
    }
  }
}
</script>

<style scoped>
.fence-operator{
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
</style>